<template>
  <div class="">

    <template v-if="detailInfo?.traceId">
      <TraceDetailTopo :activeItem="detailInfo" :timeInfo="{
        from: listParams.startTime,
        to: listParams.endTime,
      }" @on-select-edge="(...args) => emits('select-topo-edge', ...args) " />
    </template>
    <div class="mb10 section-title">基本信息</div>

    <ga-descriptions>
      <ga-descriptions-item label="请求URL">
        {{ detailInfo?.contentKey || detailInfo?.dstPort }}
      </ga-descriptions-item>
      <ga-descriptions-item label="开始时间">
        {{ detailInfo?.requestTime }}
      </ga-descriptions-item>
      <ga-descriptions-item label="整体耗时">
        {{ formatUnit(detailInfo?.requestTotalTime, "ns") }}
      </ga-descriptions-item>
      <ga-descriptions-item label="TCP建连时间"  v-show="detailInfo?.appProtocol === 'http'">
          {{ formatUnit(exceptionTime?.connectTime, "ns") }}
        </ga-descriptions-item>

      <ga-descriptions-item label="源端集群">
        {{ detailInfo?.srcMasterip?.value }}
      </ga-descriptions-item>
      <ga-descriptions-item label="目标端集群">
        {{ detailInfo?.dstMasterip?.value }}
      </ga-descriptions-item>
      <ga-descriptions-item label="源端命名空间">
        {{ detailInfo?.srcNamespace }}
      </ga-descriptions-item>
      <ga-descriptions-item label="目标端命名空间">
        {{ detailInfo?.dstNamespace }}
      </ga-descriptions-item>
      <ga-descriptions-item label="源端">
        {{ type === "workload"
          ? detailInfo?.srcWorkloadName
          : detailInfo?.srcPodName }}
      </ga-descriptions-item>
      <ga-descriptions-item label="目标端">
        {{ type === "workload"
          ? detailInfo?.dstWorkloadName
          : detailInfo?.dstPodName }}
      </ga-descriptions-item>
      <ga-descriptions-item label="包大小">
        {{ formatUnit(detailInfo?.responseIO, "byteMin") }}
      </ga-descriptions-item>
      <ga-descriptions-item label="状态码">
        {{ detailInfo?.statusCode ?? "--" }}
      </ga-descriptions-item>
    </ga-descriptions>
    <div class="mb10 section-title">请求耗时</div>
    <WaterFallChart :detailInfo="detailInfo" :exceptionTime="exceptionTime" />
    <div class="section-title">应用指标（链路应用数据）</div>
    <ga-row :gutter="16">
      <ga-col :span="8">
        <ga-spin :loading="appChartLoading" style="width: 100%;">
          <Chart :option='appChartsOptions.reqChartOptions' height='260px'></Chart>
        </ga-spin>
      </ga-col>
      <ga-col :span="8">
        <ga-spin :loading="appChartLoading" style="width: 100%;">
          <Chart :option='appChartsOptions.errChartOptions' height='260px'></Chart>
        </ga-spin>
      </ga-col>
      <ga-col :span="8">
        <ga-spin :loading="appChartLoading" style="width: 100%;">
          <Chart :option='appChartsOptions.resChartOptions' height='260px'></Chart>
        </ga-spin>
      </ga-col>
    </ga-row>
    <div id="netChart">
      <div id="netChartTitle section-title">网络指标（链路网络数据）</div>
      <ga-row :gutter="16">
        <ga-col :span="8">
          <ga-spin :loading="netChartLoading" style="width: 100%;">
            <Chart :option='netChartsOptions.packetLoss' height="260px"></Chart>
          </ga-spin>
        </ga-col>
        <ga-col :span="8">
          <ga-spin :loading="netChartLoading" style="width: 100%;">
            <Chart :option='netChartsOptions.retransmit' height="260px"></Chart>
          </ga-spin>
        </ga-col>
        <ga-col :span="8">
          <ga-spin :loading="netChartLoading" style="width: 100%;">
            <Chart :option='netChartsOptions.rttsum' height="260px"></Chart>
          </ga-spin>
        </ga-col>
        <ga-col :span="8">
          <ga-spin :loading="netChartLoading" style="width: 100%;">
            <Chart :option='netChartsOptions.sessionCount' height="260px"></Chart>
          </ga-spin>
        </ga-col>
        <template v-if='detailInfo?.srcWorkloadKind !== "vm" ||
          detailInfo.dstWorkloadKind !== "vm"
        '>
          <ga-col :span="8">
            <ga-spin :loading="netChartLoading" style="width: 100%;">
              <Chart :option='netChartsOptions.zeroWindow' height="260px"></Chart>
            </ga-spin>
          </ga-col>
          <ga-col :span="8">
            <ga-spin :loading="netChartLoading" style="width: 100%;">
              <Chart :option='netChartsOptions.sendPackage' height="260px"></Chart>
            </ga-spin>
          </ga-col>
          <ga-col :span="8">
            <ga-spin :loading="netChartLoading" style="width: 100%;">
              <Chart :option='netChartsOptions.receiverPackage' height="260px"></Chart>
            </ga-spin>
          </ga-col>
        </template>
      </ga-row>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import TraceDetailTopo from './TraceDetailTopo.vue';
import Chart from '@/components/ChartWithEmpty'
import WaterFallChart from './WaterFallChart.vue';
import { formatUnit } from '@/utils/format'

const props = defineProps({
  detailInfo: {
    type: Object,
    default: () => ({})
  },
  appChartLoading: Boolean,
  appChartsOptions: {
    type: Object,
    default: () => ({

    })
  },
  type: String,
  netChartLoading: Boolean,
  netChartsOptions: {
    type: Object,
    default: () => ({})
  },
  exceptionTime: {
    type: Object,
    default: () => ({})
  },
  maxSize: Number
})
const emits = defineEmits('select-topo-edge')
</script>

<style scoped lang="scss"></style>
